<script setup>
import {useRouter} from "vue-router";
import {ref} from "vue";
import {useUserInfoStore} from '@/store/user.js'
import {userInfoGetService} from "@/api/user";

const sc_height = ref('690px')

const router = useRouter()
//退出登录
const logout =()=> {
    localStorage.removeItem('token');
  router.push({
    path:'/login'
  })
}

function toManagePurchaserView() {
  router.push({
    path: '/manager/managePurchaser'
  })
}

function toManageSupplierView() {
  router.push({
    path: '/manager/manageSupplier'
  })
}

const userInfoStore = useUserInfoStore();
//获取个人信息
const getUserInfo = async () => {
    let result = await userInfoGetService();
    //存储pinia
    userInfoStore.info =result.data;
}
getUserInfo()//调用获取信息的方法

window.onresize = function () {
  sc_height.value = (window.innerHeight - 55) + 'px'
}
</script>
<template>
  <el-container style="min-height: 100vh; border: none">
    <!-- 侧边栏 -->
    <div class="aside">
      <el-aside style="width: 250px;">
        <el-menu
            active-text-color="Gold"
            :default-openeds="['1']"
            style="height: 100vh; width: 250px; overflow-x: hidden;  border: 0"
            background-color="#003366"
            text-color="white"
        >
          <div>

            <img
                style="display:block;margin-left: 90px; margin-top: 10px; border-radius: 30px"
                width="60px"
                height="60px"
                :src="userInfoStore.info.aavatar ? userInfoStore.info.aavatar : require('@/assets/defaultAvatar.jpg')" />
          </div>
          <div>
            <router-link to="/manager/managerHome" style="text-decoration: none">
              <el-menu-item index="1">
                <el-icon>
                  <house/>
                </el-icon>
                <template v-slot:title>
                  <span>首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</span>
                </template>
              </el-menu-item></router-link>

            <el-sub-menu index="2">
              <template v-slot:title>
                <i class="el-icon-setting" id="iconClass"></i>
                <el-icon>
                  <Menu/>
                </el-icon>
                <span>商品管理</span>
              </template>
              <router-link to="/manager/goodsCategory"  style="text-decoration: none">
                <el-menu-item index="2.1">
                  <el-icon>
                    <Filter/>
                  </el-icon>
                  <span>商品分类管理</span>
                </el-menu-item></router-link><router-link to="/manager/checkGoods"  style="text-decoration: none">
              <el-menu-item index="2.2">
                <el-icon>
                  <CircleCheck/>
                </el-icon>
                <span>商品审核</span>
              </el-menu-item></router-link>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template v-slot:title>
                <i class="el-icon-setting" id="iconClass"></i>
                <el-icon>
                  <Menu/>
                </el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="3.1" @click="toManagePurchaserView()">
                <el-icon>
                  <ShoppingCart/>
                </el-icon>
                <span>采购商管理</span>
              </el-menu-item>
              <el-menu-item index="3.2" @click="toManageSupplierView()">
                <el-icon>
                  <Van/>
                </el-icon>
                <span>供应商管理</span>
              </el-menu-item>
            </el-sub-menu>
            <router-link to="/manager/basicInfo" style="text-decoration: none">
              <el-menu-item index="4">
                <el-icon>
                  <Tools/>
                </el-icon>
                <template v-slot:title>
                  <span>个人中心</span>
                </template>
              </el-menu-item>
            </router-link>
          </div>
        </el-menu>
      </el-aside>
    </div>
    <el-container>
      <el-header
          style="
              box-shadow: 2px 2px 2px 2px rgba(255, 255, 255, 0.7);
              font-size: 2vh;
              border-bottom: 1px solid #ccc;
              line-height: 50px;
              height: 50px;
              display: flex;
              background-color: #ffffff;
              opacity: 0.8 ;
            "
      >
        <el-container>
          <div class="identify_box">
            <el-icon style="vertical-align: middle"><UserFilled /></el-icon>
            管理员：<strong>{{userInfoStore.info.anickname}}</strong>
          </div>
          <div style="width: 200px; text-align:center; color: #f10180; font-weight: bold;font-size: 4.5vh; font-family: STKaiti">
            智链商控
          </div>
          <el-dropdown class="dropbox" @command="handleCommand">
                                <span class="el-dropdown_box">
                                    <el-avatar
                                            :src="userInfoStore.info.aavatar ? userInfoStore.info.aavatar : require('@/assets/defaultAvatar.jpg')"
                                            style="width: 45px; height: 45px; margin-right: 20px"/>
                                    <el-icon>
                                        <ArrowDownBold/>
                                    </el-icon>
                                </span>
            <template #dropdown>
              <el-dropdown-menu>
                <router-link to="/manager/basicInfo" style="text-decoration: none">
                  <el-dropdown-item  command="info">
                    <el-icon>
                      <User/>
                    </el-icon>
                    <span>基本资料</span>
                  </el-dropdown-item>
                </router-link>
                <el-dropdown-item command="logout" @click="logout">
                  <el-icon>
                    <SwitchButton/>
                  </el-icon>
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-container>
      </el-header>
      <!--中间区域-->
      <el-main style="padding: 0 !important;">
        <el-scrollbar :height="sc_height">
          <router-view></router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import {House,
  Menu,
  User,
  Crop,
  EditPen,
  Tools,
  ShoppingCart,
  Van,
  Filter,
  CircleCheck, ArrowDownBold, SwitchButton,UserFilled} from "@element-plus/icons-vue";

export default {
  name: "ManagerLayoutView",
  components: {
    ShoppingCart,
    Van,
    Filter,
    CircleCheck,ArrowDownBold,House, Menu, User, Tools, SwitchButton,UserFilled}

}

</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 2.5vh;
}

body {
  height: 100%;
}
/*身份的盒子*/
.identify_box{
  width: 300px;
}
.dropbox {
  display: flex;
  margin-left: 40%;
}

.el-dropdown_box {
  display: flex;
  align-items: center;
}

#iconClass {
  color: wheat;
}

.el-menu-item.is-active #iconClass {
  color: Gold;
}

html,
body,
#app,
.el-container {
  height: 100%;
}

.el-aside {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
